<template>
	<el-row class="type"><LinkType></LinkType></el-row>
	<el-row class="type">
		<el-select v-model="type" class="m-2" placeholder="选择技术类型" clearable>
			<el-option v-for="item in learnType" :key="item.id" :label="item.name" :value="item.id"></el-option>
		</el-select>
		<el-select v-model="link_type" class="m-2" placeholder="选择链接类型" clearable>
			<el-option v-for="item in linkType" :key="item.id" :label="item.name" :value="item.id"></el-option>
		</el-select>
		<el-button type="primary" @click="onSearch">查询</el-button>
		<el-button type="success" @click="openDialog()">新增</el-button>
	</el-row>
	<el-table :data="learnList" style="width: 100%">
		<!-- id`, `title`, `type`, `keyword`, `result`, `importance`, `keywordRadio -->
		<el-table-column label="id" prop="id" width="60" />
		<el-table-column label="名字" prop="title" width="160" show-overflow-tooltip />
		<el-table-column label="图标" width="60">
			<template #default="props">
				<el-image :src="props.row.logo_url" style="width: 30px;height: 30px;" fit="cover">
					<template #error>
						<div class="image-slot"><Picture /></div>
					</template>
				</el-image>
			</template>
		</el-table-column>
		<el-table-column label="语言类型" prop="type" width="100">
			<template #default="props">
				{{ setLearnType(props.row.type) }}
			</template>
		</el-table-column>
		<el-table-column label="链接类型" prop="link_type" width="100">
			<template #default="props">
				{{ setLinkType(props.row.link_type) }}
			</template>
		</el-table-column>
		<el-table-column label="描述" prop="description" show-overflow-tooltip />
		<el-table-column label="操作" width="240">
			<template #default="props">
				<el-button type="success" @click="openLink(props.row.url)" size="small">打开</el-button>
				<el-button type="primary" @click="openDialog(props.row)" size="small">编辑</el-button>
				<el-button type="danger" @click="onDelete(props.row.id)" size="small">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<Dialog ref="dialog" @closeDialog="onCloseDialog($event, getLearnList)" v-if="showDialog"></Dialog>
	<el-pagination
		v-model:current-page="currentPage"
		:page-size="10"
		background
		layout="prev, pager, next,"
		:total="total"
		@current-change="handleCurrentChange"
		style="margin-top:10px ;"
	/>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, nextTick } from 'vue';
import { ElInput } from 'element-plus';
import Dialog from './Dialog.vue';
import LinkType from './LinkType.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import useDialog from '@/hooks/useDialog';

import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
//引入piana
const mainStore = useMainStore();
const { linkType, learnType } = storeToRefs(mainStore);
const setLinkType = v => linkType.value.find(item => item.id == v) && linkType.value.find(item => item.id == v).name;
const setLearnType = v => learnType.value.find(item => item.id == v) && learnType.value.find(item => item.id == v).name;

const { dialog, showDialog, openDialog, onCloseDialog } = useDialog;
const { proxy } = getCurrentInstance();

const learnList = ref([]);
const type = ref('');
const link_type = ref('');

const currentPage = ref(1);
const total = ref(0);
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`);
	currentPage.value = val;
	getLearnList();
};

getLearnList();

function onSearch() {
	currentPage.value = 1;
	getLearnList();
}
//初始化获取数据
function getLearnList() {
	console.log(type.value);
	proxy
		.$get('/link', {
			page: currentPage.value,
			type: type.value,
			link_type: link_type.value
		})
		.then(res => {
			if (res.code === 200) {
				console.log(res);
				learnList.value = res.data.list;
				total.value = res.data.total;
			}
		});
}

// 删除题目
function onDelete(id) {
	ElMessageBox.confirm('是否确认删除该课程?', '警告!!', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy
				.$post('/link/delete', {
					id
				})
				.then(res => {
					if (res.code === 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						});
						getLearnList();
					}
				});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}
// 打开链接
function openLink(url) {
	console.log(url);
	if (!url.startsWith('http')) {
		url = 'http://image.hnclove.com/zy/#/' + url;
	}
	window.open(url, '_blank');
}

</script>

<style lang="less" scoped>
.type {
	& > * {
		margin: 5px;
	}
}
.table-item {
	div {
		margin: 20px;
	}
	.title {
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}
}
</style>
